<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .activity-statistics {
      background: #F4FAFF;
      padding-left: 24px;
    }

    .activity-statistics-dl {
      /* width: 100%; */
      padding-top: 66px;
      padding-left: 94px;
      padding-right: 94px;
      margin-bottom: 28px;
    }

    .activity-statistics-dt {
      height: 36px;
      line-height: 36px;
      border-left: 8px solid #008EFF;
      padding-left: 16px;
      font-size: 36px;
      color: #333333;
    }

    .activity-statistics-dd {
      display: flex;
      padding-top: 40px;
    }

    .activity-statistics-list {
      padding-left: 18px;
      padding-right: 30px;
      padding-top: 34px;
      padding-bottom: 34px;
      width: 356px;
      background-color: #fff;
      margin-right: 54px;
    }

    .activity-statistics-title {
      font-size: 28px;
      color: #333333;
    }

    .activity-statistics-info {
      width: 348px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }

    .activity-statistics-num {
      font-size: 30px;
      color: #151515;
    }

    .lh70 {
      line-height: 70px;
    }

    .number {
      font-size: 50px;
      color: #008EFF;
    }

    .activity-statistics-btn {
      width: 164px;
      height: 54px;
      line-height: 54px;
      background: #008EFF;
      border-radius: 6px;
      font-size: 24px;
      color: #FFFFFF;
      text-align: center;
    }

    .jcfs {
      justify-content: flex-start;
    }

    .db {
      display: block;
    }

    .tc {
      text-align: center;
    }

    .auto {
      margin-left: auto;
      margin-right: auto;
    }

    .mt10 {
      margin-top: 10px;
    }

    .m0 {
      margin: 0;
    }

    .deal-list {
      padding: 38px 40px 18px;
      background-color: #fff;
      margin-right: 54px;
    }

    .deal-img {
      margin-top: 22px;
      margin-bottom: 22px;
    }

    .deal-name {
      display: inline-block;
      width: 130px;
    }

    .deal-num {
      width: 300px;
      font-size: 30px;
      color: #333333;
    }

    .font-color {
      color: #008EFF;
    }

    .deal-btn {
      margin-top: 24px;
    }

    .grade {
      margin-top: 146px;
    }

    .grade-title {
      font-size: 40px;
      color: #333333;
      margin-bottom: 60px;
    }

    .grade-content {
      display: flex;
    }

    .grade-list {
      padding: 24px 120px 31px;
      background-color: #fff;
      margin-right: 54px;
    }

    .grade-num {
      font-size: 30px;
      color: #151515;
      margin-bottom: 26px;
    }
     .pareny a.active{
    background: #00FF00!important;
    border-color:#00FF00!important;
    }
  </style>
  <base href="/">
<!-- 下拉框 -->
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../../system/index/top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="static/ace/css/datepicker.css" />
</head>

<body>
<form action="mult/multDetails" method="post"
	name="userForm" id="userForm">
	<input type="hidden" name="times" id="times">
	<input type="hidden" id="startTime" value="${pd.startTime }">
	<input type="hidden" id="endTime" value="${pd.endTime }">
	<table class="table" style="margin-top: 5px;width:1000px;">
	<tr>
		<td class="pareny">
		<a class="btn btn-xs" 
			onclick="times(1);">
			今天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs" 
			onclick="times(2);">
			昨天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs" 
			onclick="times(3);">
			前天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs" 
			onclick="times(4);">
			近7天
		</a>&nbsp;&nbsp;
		<a class="btn btn-xs" 
			onclick="times(5);">
			近30天
		</a>&nbsp;&nbsp;&nbsp;自定义时间:&nbsp;
		<input class="span10 date-picker" name="startTime"
          value="${pd.startTime }"
          type="text" data-date-format="yyyy-mm-dd"
          style="width:88px;" placeholder="开始时间"
          title="开始时间"/>-
        <input class="span10 date-picker" name="endTime"
            type="text" value="${pd.endTime }"
          data-date-format="yyyy-mm-dd"
          style="width:88px;" placeholder="结束时间"
          title="结束时间"/>&nbsp;&nbsp;&nbsp;
          <a class="btn btn-light btn-xs" onclick="searchs();" title="检索"><i
			id="nav-search-icon"
			class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a>
		</td>
	</tr>
</table>
  <div class="activity-statistics">
    <dl class="activity-statistics-dl consumption">
      <dt class="activity-statistics-dt">活动商品消费情况</dt>
      <dd class="activity-statistics-dd">
        <div class="activity-statistics-list">
          <div class="activity-statistics-title">购买活动商品的用户量</div>
          <div class="activity-statistics-info">
            <div class="activity-statistics-num lh70">
              <span class="number">${cont.pnum }</span>人</div>
            <a class="activity-statistics-btn mt10" href="javascript:void()" onclick="person()">查看详情</a>
          </div>
        </div>
        <div class="activity-statistics-list">
          <div class="activity-statistics-title">卖出活动商品数量</div>
          <div class="activity-statistics-info">
         	 <c:if test="${cont.gnum ==null || cont.gnum ==''}">
            	<div class="activity-statistics-num lh70">
            	<span class="number">0</span>件</div>
              </c:if>
               <c:if test="${cont.gnum !=null && cont.gnum !=''}">
            	<div class="activity-statistics-num lh70">
            	<span class="number">${cont.gnum}</span>件</div>
              </c:if>
            <a class="activity-statistics-btn mt10" href="javascript:void()" onclick="goodsNum()">查看详情</a>
          </div>
        </div>
        <div class="activity-statistics-list m0">
          <div class="activity-statistics-title">卖出活动商品金额</div>
          <div class="activity-statistics-info">
              <c:if test="${cont.price ==null || cont.price ==''}">
            <div class="activity-statistics-num lh70">
            	<span class="number">0</span>元</div>
              </c:if>
               <c:if test="${cont.price !=null && cont.price !=''}">
            <div class="activity-statistics-num lh70">
            	<span class="number">${cont.price}</span>元</div>
              </c:if>
             <a class="activity-statistics-btn mt10" href="javascript:void()" onclick="price()">查看详情</a>
          </div>
        </div>
      </dd>
    </dl>
    <dl class="activity-statistics-dl deal">
      <dt class="activity-statistics-dt">各商品成交量及金额</dt>
      <dd class="deal-dd activity-statistics-dd">
       <!--  <div class="deal-list">
          <div class="activity-statistics-title tc">宾川晚芦</div>
          <div class="deal-img tc">
            <img src="static/images/bitmap-copy.png" alt="">
          </div>
          <div class="deal-num">
            <span class="deal-name">成交：</span>
            <span class="deal-number">
              <font class="font-color">1645456</font>件</span>
          </div>
          <div class="deal-num">
            <span class="deal-name">总金额：</span>
            <span class="deal-number">
              <font class="font-color">1645456</font>元</span>
          </div>
          <div class="activity-statistics-btn deal-btn auto">查看详情</div>
        </div> -->
          <c:choose>
		<c:when test="${not empty multGoods}">
			<c:forEach items="${multGoods}" var="user" varStatus="vs">
			       <div class="deal-list">
			          <div class="activity-statistics-title tc">${user.title }</div>
			          <div class="deal-img tc">
			            <img src="${user.thumb }" alt="">
			          </div>
			          <div class="deal-num">
			            <span class="deal-name">成交：</span>
			            <span class="deal-number">
			              <font class="font-color">${user.num}</font>件</span>
			          </div>
			          <div class="deal-num">
			            <span class="deal-name">总金额：</span>
			            <span class="deal-number">
			              <font class="font-color">${user.price }</font>元</span>
			          </div>
			          <a class="activity-statistics-btn deal-btn auto" href="javascript:void()" onclick="goodsId('${user.id}')">查看详情</a>
			        </div>
			</c:forEach>
		</c:when>
	</c:choose>
      </dd>
    </dl>
  <!--   <dl class="activity-statistics-dl">
      <dt class="activity-statistics-dt">兑换券</dt>
       <dd class="activity-statistics-dd jcfs">
        <div class="activity-statistics-list">
         <div class="activity-statistics-title">送出兑换券</div>
          <div class="activity-statistics-info">
           <div class="activity-statistics-num">
            <span class="number">190</span>张</div>
            <div class="activity-statistics-btn mt10">查看详情</div>
          </div>
        </div>
        <div class="activity-statistics-list m0">
          <div class="activity-statistics-title">消费兑换券</div>
          <div class="activity-statistics-info">
            <div class="activity-statistics-num">
              <span class="number">190</span>张</div>
            <div class="activity-statistics-btn mt10">查看详情</div>
          </div>
        </div>
      </dd>
    </dl> -->

    <dl class="activity-statistics-dl m0 grade">
      <dt class="grade-title tc">截止目前用户等级分布</dt>
      <dd class="grade-content">
        <div class="grade-list">
          <div class="grade-img tc">
            <img src="static/images/v1.png" alt="">
          </div>
          <div class="grade-num tc">
            <span class="number">50</span>人
          </div>
          <div class="activity-statistics-btn">查看详情</div>
        </div>
        <div class="grade-list">
          <div class="grade-img tc">
            <img src="static/images/v2.png" alt="">
          </div>
          <div class="grade-num tc">
            <span class="number">50</span>人
          </div>
          <div class="activity-statistics-btn">查看详情</div>
        </div>
        <div class="grade-list m0">
          <div class="grade-img tc">
            <img src="static/images/v3.png" alt="">
          </div>
          <div class="grade-num tc">
            <span class="number">50</span>人
          </div>
          <div class="activity-statistics-btn">查看详情</div>
        </div>
      </dd>
    </dl>
  </div>
  </form>
  <!-- 页面底部js¨ -->
	<%@ include file="../../system/index/foot.jsp"%>
	<!-- 删除时确认窗口 -->
	<script src="static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="static/ace/js/ace/ace.js"></script>
	<!-- 日期框 -->
	<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
	<!-- 下拉框 -->
	<script src="static/ace/js/chosen.jquery.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="static/js/jquery.tips.js"></script>
</body>
<script type="text/javascript">
$(top.hangge());
$(function(){
	$('.date-picker').datepicker({autoclose: true,todayHighlight: true});
	  var times=${pd.times};
	 $('.pareny a').eq(times-1).addClass('active') 
})
function times(ids){
	$("#times").val(ids);
	$("#userForm").submit();
}
function searchs(){
	$("#userForm").submit();
}
function person(){
	startTime=$("#startTime").val();
    endTime=$("#endTime").val();
	window.location.href='/mult/multGoods.do?startTime='+startTime+'&endTime='+endTime+'&kd=1';
}
function goodsNum(){
	startTime=$("#startTime").val();
    endTime=$("#endTime").val();
	window.location.href='/mult/multGoods.do?startTime='+startTime+'&endTime='+endTime+'&kd=1';
}
function price(){
	startTime=$("#startTime").val();
    endTime=$("#endTime").val();
	window.location.href='/mult/multGoods.do?startTime='+startTime+'&endTime='+endTime+'&kd=1';
}
function goodsId(id){
	startTime=$("#startTime").val();
    endTime=$("#endTime").val();
	window.location.href='/mult/multGoods.do?id='+id+'&startTime='+startTime+'&endTime='+endTime+'&kd=1';
}
</script>

</html>
